<template>
  <div class="facility-dialog">
    <div class="dialog-title">{{ deviceName }}</div>
    <div class="remote-restart-btn">
      <img src="@/assets/img/close.png" @click="$emit('close')"/>
    </div>

    <div class="facility-content">
      <div class="top-main">
        <div class="facility-img">
          <img src="@/assets/img/gb/img_spore.png" />
        </div>
        <div class="top-main-right">
          <div class="facility-info">
            <div class="info-i">
              <img class="info-i-icon" src="@/assets/img/gb/icon_state.png" />
              <div>
                <div class="info-i-text">工作中</div>
                <div class="info-i-title">状态</div>
              </div>
            </div>
            <div class="info-i">
              <img class="info-i-icon" src="@/assets/img/gb/icon_flow.png" />
              <div>
                <div class="info-i-text">18.6V</div>
                <div class="info-i-title">太阳能电压</div>
              </div>
            </div>
            <div class="info-i">
              <img class="info-i-icon" src="@/assets/img/gb/icon_flow.png" />
              <div>
                <div class="info-i-text">30.8</div>
                <div class="info-i-title">工作湿度</div>
              </div>
            </div>
          </div>
          <div class="alarm-message">
            <div class="alarm-message-title">
              <img class="alarm-icon" src="@/assets/img/gb/icon_xiaox.png" />
              <div class="alarm-title">报警消息</div>
            </div>
            <div class="alarm-message-content">深层土壤湿度数据异常</div>
          </div>
        </div>
      </div>

      <div class="seedling-bottomMain">
        <div class="data-i">
          <div class="model-tltle">孢子实时监测</div>
          <div class="monitor-main">
            <img src="@/assets/img/gb/baozi/1.jpg" />
            <img src="@/assets/img/gb/baozi/2.jpg" />
            <img src="@/assets/img/gb/baozi/3.jpg" />
          </div>
        </div>
        <div class="data-i">
          <div class="model-tltle">孢子历史监测</div>
          <div class="monitor-main">
            <img src="@/assets/img/gb/baozi/4.jpg" />
            <img src="@/assets/img/gb/baozi/5.jpg" />
            <img src="@/assets/img/gb/baozi/6.jpg" />
            <img src="@/assets/img/gb/baozi/7.jpg" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, reactive } from "vue";
import { deviceDetail, getPestsNums, getPestsList } from "@/api/deviceInfo";

const deviceName = ref("");

function initData(name: string, num: string) {
  deviceName.value = name;
}
// 暴露变量
defineExpose({
  initData,
});
</script>

<style scoped lang="scss">
@import "../deviceDialog/dialog";
</style>
